<!--
 * @Description: 头部
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-05 14:18:51
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-22 13:49:59
-->
<template>
    <div class="head-wrap">
        <div class="containers clear">
            <div class="menu-btn" @click="isOpen = !isOpen">
                <span class="iconfont iconcaidan"></span>
            </div>
            <div class="head-left">
                <nuxt-link to="/" class="logo">
                    <img src="/images/logo.png" alt="" />
                </nuxt-link>
            </div>
            <div class="login-wrap">
                <!-- 登录状态 -->
                <el-dropdown v-if="is_login" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <div class="user-wrap">
                            <div class="avatar-wrap">
                                <el-avatar :size="avatarSazi" :src="user.avatarUrl ? IMG_URL + user.avatarUrl : '/images/avatar.png'"></el-avatar>
                            </div>
                            <span class="info">{{user.nickName}}</span>
                        </div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="goOrder">我的订单
                        </el-dropdown-item>
                        <el-dropdown-item command="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- 未登录状态 -->
                <div class="botton-wrap" v-else>
                    <button class="btn plain" @click="go_login()">登录</button>
                </div>
            </div>
            <div class="nav-list" :class="isOpen ? 'open' :''">
                <ul class="clear">
                    <li v-for="(item, index) in navs" :key="index">
                        <nuxt-link class="link" :class="item.path==='/' ? 'home' : ''" :to="item.path">{{
                            item.name
                        }}</nuxt-link>
                    </li>
                </ul>
            </div>
        </div>
        <log-in :visible.sync="is_loginComponent"></log-in>
    </div>
</template>
<script>
import {getUserInfo} from "~/api/login"
import { mapMutations,mapActions } from 'vuex'
import clientWidth from '~/mixin/clientWidth'
export default {
    mixins: [clientWidth],
    data() {
        return {
            navs: [
                {
                    name: "首页",
                    id: 1,
                    path: "/",
                },
                {
                    name: "选课中心",
                    id: 2,
                    path: "/courseCenter",
                },
                {
                    name: "学习中心",
                    id: 3,
                    path: "/LearningCenter",
                },
                {
                    name: "关于我们",
                    id: 4,
                    path: "/aboutUs",
                },
            ],
            // 昵称
            nickName:'',
            is_loginComponent:false,
            isOpen:false
        };
    },
    computed:{
        // 是否登录
        is_login(){
            return this.$store.state.isLogin
        },
        // 用户信息
        user(){
            return this.$store.state.user
        },
        // 头像的大小
        avatarSazi(){
            return this.clientWidth > 768 ? 50 : 35
        }
    },
    mounted(){
        let token = window.localStorage.getItem('token');
        if(token){
            this.set_isLogin(true)
        }
    },
    watch:{
        // 登录成功获取用户信息
        is_login:function (newVal){
            if(newVal){
                this.$axios.post('/pc/user/info').then(res =>{
                    if(res.data.code === 0){
                        // 将用户信息保存到vuex
                        this.set_user(res.data.data)
                    }else if(res.data.code === 300000){
                        // 登录失败清空token
                        this.outLogin()
                    }
                })
            }
        }
    },
    methods:{
        ...mapMutations({
            set_isLogin:'set_isLogin',
            set_user:'set_user'
        }),
        ...mapActions([
            'outLogin'//退出登录
        ]),
        // 去登录
        go_login(){
            this.is_loginComponent = true
        },
        // 下拉菜单的点击事件
        handleCommand(command){
            if(command === 'outLogin'){
                 this.$confirm('是否退出登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(()=>{
                    // 退出登录
                    this.outLogin()
                }).catch(()=>{
                    
                })
                
            }else if(command === 'goOrder'){
                this.$router.push('/my/myOrder')
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.head-wrap {
    background-color: #01002c;
    height: 66px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .menu-btn{
        float: left;
        margin-top: 13px;
        display: none;
        .iconfont{
            font-size: 30px;
            color: #fff;
        }
    }
    .head-containers {
        max-width: 1200px;
        margin: 0 auto;
    }
    .logo {
        margin-top: 11px;
        display: block;
    }
    .head-left {
        float: left;
    }
    .login-wrap {
        float: right;
        .botton-wrap {
            margin-top: 17px;
            .btn {
                min-width: 60px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                &:hover {
                    opacity: 1;
                }
            }
        }
        .user-wrap{
            display: flex;
            align-items: center;
            margin-top: 7px;
            .info{
                font-size: 14px;
                color: #fff;
                padding-left: 10px;
            }
        }
    }
}
.nav-list {
    float: left;
    margin-left: 20%;
    li {
        float: left;
        .link {
            color: #fff;
            font-size: 16px;
            padding: 22px 0;
            display: block;
            position: relative;
            &:hover {
                color: $--color-primary;
            }
            &.home{
                &.nuxt-link-active{
                    color: #fff;
                    &::before{
                        display: none;
                    }
                    &:hover {
                        color: $--color-primary;
                    }
                }
                &.nuxt-link-exact-active{
                    color: $--color-primary;
                    &::before {
                        display: block;
                    }
                }
            }
            &.nuxt-link-active {
                color: $--color-primary;
                &::before {
                    content: "";
                    display: block;
                    width: 14px;
                    height: 2px;
                    background-color: $--color-primary;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 10px;
                    z-index: 10;
                }
            }
        }
        & + li {
            margin-left: 70px;
        }
    }
}
@media screen and (max-width: 760px) {
    .nav-list li .link.home.nuxt-link-exact-active::before{
        display: none;
    }
    .head-wrap {
        height: 55px;
        .logo{
            margin-top: 0;
        }
        .menu-btn{
            display: block;
        }
        .head-left{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 120px;
        }
        .login-wrap{
            .user-wrap{
                margin-top: 10px;
                .info{
                    display: none;
                }
            }
            .botton-wrap{
                margin-top: 12px;
            }
        }
    }
    .nav-list {
        display: none;
        margin-left: 0;
        width: 100%;
        background-color: #01002c;
        position: absolute;
        top: 55px;
        left: 0;
        z-index: 10;
        &.open{
            display: block;
        }
        li {
            float: none;
            .link {
                padding: 15px;
                &.nuxt-link-exact-active {
                    &::before {
                        display: none;
                    }
                }
            }
            & + li {
                margin-left: 0;
            }
        }
    }
}
</style>


